<?php
$this->title = $title;
$per_url = Yii::$app->params['imgurl'];
$this->registerCssFile('@web/css/dropload.css');
$this->registerCss('
    body{background: #fff;margin:0px;padding:0px;}
    .mui-bar-nav {
        -webkit-box-shadow: unset;
        box-shadow: unset !important;
    }
    .myheader a{color:#333;}
    .zhanwei{width:100%;height:45px;}
    ul, ol {
        list-style: none;
        margin: 0;
        padding: 0;
        border: 0;
        color: #333333;
        font-size: 14px;
    }
    .product_list_ol li {
        padding: 15px;
        background-color: #FFFFFF;
        border-bottom: 1px solid #F4F4F4;
        overflow: hidden;
    }
    .product_list_ol_div {
        float: left;
        width: 74%;
        margin-left: 4%;
    }
    .product_list_ol li img {
        float: left;
        width: 22%;
        border: 1px solid #E6E6E6;
        border-radius: 6px;
    }
    .product_list_ol_div h3 {
        line-height: 32px;
        font-size: 16px;
        margin: 0;
        padding: 0;
        border: 0;
        color: #333333;
    }
    .product_list_ol_tex {
        font-size: 12px;
        font-weight:300;
        color: #333;
        margin: 0;
        padding: 0;
        border: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .product_list_ol_div_btm span{
        padding: 1px 8px;
        border:1px solid #333;
        -webkit-border-radius: 6px;-moz-border-radius: 6px;
        border-radius: 6px;
        font-size: 12px;
        color:#333;
    }
');
?>
<div id="page-more-list" style="margin-bottom: 60px;">

    <header id="myheader" class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #333;"></a>
        <a href="#menu" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right" style="color: #333;"></a>
        <h1 class="mui-title"><?=$title?></h1>
    </header>
    <div class="zhanwei"></div>

    <div class="booklist">
        <ol class="product_list_ol">
            <?php foreach($list as $v){ ?>
                <a href="/book-item/<?=$v['number']?>.html">
                <li>
                    <img src="/img/120-160.png" style=" background:url(<?=$per_url . $v['thumb_img']?>); background-size:cover">
                    <div class="product_list_ol_div">
                        <h3><?=$v['front_title']?></h3>
                        <p class="product_list_ol_tex"><?=$v['intro']?></p>
                        <p class="product_list_ol_div_btm" style="text-align: right;margin-top: 20px;">
                            <?php if($v['click_num'] > 0){ ?>
                                <span style="border:1px solid #fc6a5e;color:#fc6a5e"><?=$v['click_num']?> 人气</span>
                            <?php }?>
                            <?php if($v['zan_num'] > 0){ ?>
                                <span><?=$v['zan_num']?> 收藏</span>
                            <?php }?>
                            <?php if($v['is_over'] == 1){ ?>
                                <span>已完结</span>
                            <?php }else{ ?>
                                <span>更新中</span>
                            <?php }?>
                        </p>
                    </div>
                </li>
                </a>
            <?php }?>
        </ol>
    </div>

</div>

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="/js/dropload.min.js"></script>

<script>
    // 上拉加载加载
    var page = 2;
    // dropload
    $('.product_list_ol').dropload({
        scrollArea : window,
        loadDownFn : function(me){
            $.ajax({
                type: 'POST',
                url: "/touch/default/more-list?page="+page+"&type=<?=$type?>",
                dataType: 'json',
                success: function(res){
                    console.log(res)
                    if(res.code == 200){
                        var list = res.data.list;
                        var html = '';
                        for(var i = 0;i < list.length;i++){
                            var item = list[i];
                            html += '<a href="/book-item/'+item.number+'.html"><li>';
                            html += '<img src="/img/120-160.png" style="background:url(<?=$per_url?>'+item.thumb_img+'); background-size:cover">';
                            html += '<div class="product_list_ol_div">';

                            html += '<h3>'+item.front_title+'</h3>';
                            html += '<p class="product_list_ol_tex">'+item.intro+'</p>';
                            html += '<p class="product_list_ol_div_btm" style="text-align: right;margin-top: 20px;">';

                            if(item.click_num > 0){
                                html += '<span style="margin-right:5px;border:1px solid #fc6a5e;color:#fc6a5e">'+item.click_num+' 人气</span>';
                            }
                            if(item.zan_num > 0){
                                html += '<span style="margin-right:5px;">'+ item.zan_num+ ' 收藏</span>';
                            }

                            if(item.is_over == 1){
                                html += '<span style="margin-right:5px;">已完结</span>';
                            }else{
                                html += '<span>更新中</span>';
                            }
                            html += '</p>';

                            html += '</div>';
                            html += '</li></a>';
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function(){
                            // 加载 插入到原有 DOM 之后
                            $('.product_list_ol').append(html);
                            $(".dropload-down").remove();
                            // 每次数据加载完，必须重置
                            me.resetload();
                        },500);
                        page = page + 1;
                    }else{
                        me.lock();
                        // 显示无数据
                        me.noData();
                        me.resetload();
                    }
                },
                error: function(xhr, type){
                    me.lock();
                    // 显示无数据
                    me.noData();
                    me.resetload();
                }
            });
        },
        threshold : 50
    });
</script>
